<template>
  <AsideStep :detail-data="props.detailData" />

  <el-descriptions
    class="global-descriptions"
    title="基本信息"
    :column="1"
    border
  >
    <el-descriptions-item label="渠道商">
      <ProfilePanel
        v-if="props.detailData.user"
        :avatar="props.detailData.user.avatar"
        :nickname="props.detailData.user.nickname"
        :remark="props.detailData.user.remark"
      />
    </el-descriptions-item>
    <el-descriptions-item label="订单状态">
      <PipeTags type="appeal" :state="props.detailData.state" />
    </el-descriptions-item>
    <el-descriptions-item label="订单类型">
      <PipeTags type="order-type" :state="props.detailData.type" />
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="售后信息"
    :column="1"
    border
  >
    <el-descriptions-item label="售后方式">
      <PipeTags
        type="appeal-type-appeal"
        :state="props.detailData.typeAppeal"
      />
    </el-descriptions-item>
    <el-descriptions-item label="售后原因">
      {{ props.detailData.remarkAppeal }}
    </el-descriptions-item>
    <el-descriptions-item label="拒绝原因">
      {{ props.detailData.remarkRefuse }}
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="撤销收益"
    :column="1"
    border
    v-if="props.detailData.typeAppeal === '2'"
  >
    <el-descriptions-item
      :label="props.detailData.type === '1' ? '售后金额(元)' : '售后积分'"
    >
      <PipeMoney
        v-if="props.detailData.money"
        :type="props.detailData.type"
        :money="props.detailData.money"
      />
    </el-descriptions-item>
    <el-descriptions-item label="撤回直属上级现金奖">
      <PipeMoney
        v-if="props.detailData.firstCash"
        type="1"
        :money="props.detailData.firstCash"
      />
    </el-descriptions-item>
    <el-descriptions-item label="撤回直属上级奖励">
      <PipeMoney
        v-if="props.detailData.firstAward"
        :type="props.detailData.type"
        :money="props.detailData.firstAward"
      />
    </el-descriptions-item>
    <el-descriptions-item label="撤回上上级奖励">
      <PipeMoney
        v-if="props.detailData.secondAward"
        :type="props.detailData.type"
        :money="props.detailData.secondAward"
      />
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="支付平台"
    :column="1"
    border
  >
    <el-descriptions-item label="平台终端">
      <PipeTags type="order-type-apply" :state="props.detailData.typeApply" />
    </el-descriptions-item>
    <el-descriptions-item label="付款方式">
      <PipeTags type="order-type-pay" :state="props.detailData.typePay" />
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="订单号"
    :column="1"
    border
  >
    <el-descriptions-item label="订单编号">
      {{ props.detailData.orderNo }}
    </el-descriptions-item>
    <el-descriptions-item label="订单UUID">
      {{ props.detailData.ownId }}
    </el-descriptions-item>
    <el-descriptions-item label="原订单号">
      {{ props.detailData.orderPrimary }}
    </el-descriptions-item>
    <el-descriptions-item label="原支付单号">
      {{ props.detailData.orderApply }}
    </el-descriptions-item>
    <el-descriptions-item label="微信退款单号">
      {{ props.detailData.appealApply }}
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="时间线"
    :column="1"
    border
  >
    <el-descriptions-item label="会员申请时间">
      <PipeDatetime :value="props.detailData.createTime" />
    </el-descriptions-item>
    <el-descriptions-item label="平台答复时间">
      <PipeDatetime :value="props.detailData.confirmTime" />
    </el-descriptions-item>
    <el-descriptions-item label="会员回寄时间">
      <PipeDatetime :value="props.detailData.returnTime" />
    </el-descriptions-item>
    <el-descriptions-item label="平台处理时间">
      <PipeDatetime :value="props.detailData.replyTime" />
    </el-descriptions-item>
    <el-descriptions-item label="订单完成时间">
      <PipeDatetime :value="props.detailData.completeTime" />
    </el-descriptions-item>
    <el-descriptions-item label="平台拒绝时间">
      <PipeDatetime :value="props.detailData.refuseTime" />
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import {
  PropType
  // reactive,
  // ref,
  // watch
} from 'vue';
// import { GetLabelByStateOptions } from '@/utils/common';

import AsideStep from './aside-step.vue';

// props
const props = defineProps({
  detailData: {
    type: Object as PropType<API.appeal.EntitySchema>,
    default: () => ({})
  }
});

// watch(
//   () => props.detailData,
//   (val) => {
//     if (!val) return;
//     stepData.value = useGetStepData(val);
//     console.log('stepData.value', stepData.value);
//   }
// );
</script>

<style lang="scss" scoped>
.global-descriptions {
  margin-top: 16px;
}
</style>
